<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <!-- 引入CSRF令牌元标签（关键） -->
  <meta name="_csrf" th:content="${_csrf.token}">
  <meta name="_csrf_header" th:content="${_csrf.headerName}">
  <title>Title</title>
  <myhead th:replace="basic/layout :: head('前台页面')"></myhead>
  <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet" />
  <script th:src="@{/login/js/bootstrap.bundle.min.js}" ></script>
  <style>
      .card .productPrice{
          font-size:26px;
          color: red;
      }
      .card .productStock{
          font-size: 12px;
          color: gray;
      }
  </style>
</head>
<body>
<div th:replace="basic/layout :: topNav('front')"></div>
<div class="container">
  <div class="row row-cols-4 justify-content-between">
    <div class="card" style="width: 18rem;" th:each="product:${products}">
      <img th:src="${product.imageUrl}" class="card-img-top" alt="${product.name}">
      <div class="card-body">
        <h4 class=".card-title" th:text="${product.name}"></h4>
        <p class="card-text" th:text="${product.description}"></p>
        <span class="card-text productPrice" th:text="${product.price}"></span>
        <span class="card-text productStock" th:text="${product.stock}"></span>
      </div>
    </div>
  </div>
</div>
</body>
</html>